<template>
     <!-- 顶部 -->
     <div class="Top">
          <!-- 用户信息 -->
          <div>
               <el-dropdown>
                    <span class="el-dropdown-link">
                         <el-avatar style="position: relative;top:12px" :src="ReadImageSrc + Avatar" class="avatar_img" />
                         <span style="color: white;position: relative;right:-10px">菜单</span>
                         <el-icon class="el-icon--right" style="color: white;position: relative;right:-10px">
                              <arrow-down />
                         </el-icon>
                    </span>
                    <template #dropdown>
                         <el-dropdown-menu>
                              <router-link to="/User">
                                   <el-dropdown-item>个人信息</el-dropdown-item>
                              </router-link>
                              <router-link to="/addfriends">
                                   <el-dropdown-item>好友通知</el-dropdown-item>
                              </router-link>
                              <router-link to="">
                                   <el-dropdown-item @click="LoginOut">退出</el-dropdown-item>
                              </router-link>
                         </el-dropdown-menu>
                    </template>
               </el-dropdown>
               <!-- 标题 --> 
               <p class="title"> 初始化后台管理系统 </p>
          </div>
     </div>
</template>
<script setup>
import '/src/style.css'
import { getUser } from '../service/Login.js'
import { onMounted, ref, reactive } from 'vue'
import '../assets/media/Top.css'
import router from '../router';
import { ReadImageSrc } from '/src/config.js'

// 接受参数
const User_List = ref()
const User_name = localStorage.getItem('User')
const User = reactive(User_List)
const Rola = ref()
const Avatar = ref()
onMounted(() => {
     const data = { guid: localStorage.getItem('Guid'), login_user: localStorage.getItem('User'), login_password: localStorage.getItem('PassWord') }
     if (location.pathname != "/login") {
          getUser(data).then((res) => {
               // console.log(res)
               User_List.value = res.data
               //*获取头像
               Avatar.value = User_List.value[1].user_img
               //*获取rola
               Rola.value = res.data[0].rola_content
          })
     }

})

const LoginOut = () =>
{
     location.href = "login"
}


</script>
<style>
.el-dropdown {
     position: relative;
     padding-top: 20px;
}

.avatar_img {

     margin-top: -22px;

}

.User_information {
     border: 0px solid blue;
     height: 100%;
     position: relative;
     margin-top: 500px;

}

.Top {
     border-bottom: 2px solid rgb(168, 230, 255);
     background-color: rgb(168, 230, 255);
     width: 100vw;
     height: 60px;


}

p {
     text-align: center;
     font-family: sszhj;
     font-size: 20px;
}

.title {
     font-size: 22px;
     position: relative;
     bottom: 25px;
     width: 50%;
     left: 25%;
     text-align: center;
     color: white;
     font-weight: bolder;
     letter-spacing: 20px;
     text-shadow: -1px -1px 0 rgb(168, 230, 255), 1px -1px 0 rgb(168, 230, 255), -1px 1px 0 rgb(168, 230, 255), 1px 2px 0 black;
}
</style>